<template>
  <div id="app">
    <router-view/> <!-- 使用路由视图替代硬编码组件 -->
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style lang="less">
/* 移动端基础重置样式 */
#app {
  // 字体家族优化（优先系统默认无衬线字体）
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, 
               "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  
  // 抗锯齿渲染
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  
  // 移动端专属优化
  -webkit-tap-highlight-color: transparent; // 移除点击高亮
  -webkit-text-size-adjust: 100%;           // 禁止字体自动放大
  box-sizing: border-box;
  
  // 布局重置
  width: 100%;
  min-height: 100vh;      // 确保全屏高度
  margin: 0;
  padding: 0;
  color: #333;            // 更通用的文字颜色
  line-height: 1.5;
  background-color: #fff; // 纯白背景
}

/* 全局盒模型规则（推荐） */
*, *::before, *::after {
  box-sizing: inherit; // 继承父元素盒模型
  margin: 0;
  padding: 0;
}

/* 移动端常用标签重置 */
body {
  overflow-x: hidden; // 防止横向滚动
  touch-action: manipulation; // 优化触摸响应
}

/* 图片基础样式（适应移动端） */
img {
  max-width: 100%;
  height: auto;
  vertical-align: middle; // 消除图片底部间隙
}
</style>
